<template>
  <ProTable
    ref="tableRef"
    :fetchListApi="_pushLog"
    :columns="columns"
    :height="600"
    row-key="configPushTotalId"
    hide-search
  >
    <template #operation="{ record }">
      <b-button icon="edit" type="link" @click="handleCheck(record)"
        >查看记录</b-button
      >
      <b-button
        v-if="record.readyCount > 0"
        icon="delete"
        type="link"
        @click="handleCancel(record)"
        >取消推送</b-button
      >
    </template>
  </ProTable>
</template>

<script setup lang="tsx">
import { computed, ref } from 'vue';
import { message } from 'ant-design-vue';
import { ProTable, ProTableProps } from '@/components/ProTable/index';
import { cancelPushConfig, pushLog } from '@/api/push';

defineOptions({
  name: 'PushRecord',
});

interface Props {
  pageData: any;
}
const props = defineProps<Props>();

const tableRef = ref();
const _pushLog = (params: any) => {
  const configId = props.pageData.id;
  return pushLog({ ...params, configId });
};
const columns = computed<ProTableProps['columns']>(() => [
  {
    title: '推送时间',
    dataIndex: 'pushTime',
  },
  {
    title: '推送总数',
    dataIndex: 'totalCount',
  },
  {
    title: '推送成功数',
    dataIndex: 'successCount',
  },
  {
    title: '待推送数',
    dataIndex: 'readyCount',
  },
  {
    title: '推送失败数',
    dataIndex: 'failCount',
    customRender({ record, text }) {
      return (
        <b-button
          type='link'
          onClick={() => {
            handleCheck(record, '0');
          }}
        >
          {text}
        </b-button>
      );
    },
  },
  {
    title: '推送人',
    dataIndex: 'pushBy',
  },
  {
    title: '推送进度',
    dataIndex: 'progress',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    fixed: 'right',
    width: 150,
  },
]);

const emit = defineEmits(['handleCheck']);
const handleCancel = async (record: any) => {
  const id = record.configPushTotalId;
  await cancelPushConfig(id);
  message.success('取消推送成功');
  tableRef.value.refresh();
};
const handleCheck = async (record: any, sta?: any) => {
  emit('handleCheck', record, sta);
};
</script>
